<template>
  <a-layout
    id="components-layout-demo-side"
    style="min-height: 100vh"
    :class="[`nav-theme-${navTheme}`, `nav-layout-${navLayout}`]"
  >
    <a-layout-sider
      collapsible
      :trigger="null"
      v-model="collapsed"
      :theme="navTheme"
      v-if="navLayout === 'left'"
    >
      <div class="logo">
        ant-design-logo
      </div>
      <SiderMenu></SiderMenu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="collapsed = !collapsed"
        />
        <Header></Header>
      </a-layout-header>
      <a-layout-content style="margin: 0 16px">
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>User</a-breadcrumb-item>
          <a-breadcrumb-item>Bill</a-breadcrumb-item>
        </a-breadcrumb>
        <router-view></router-view>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        <Footer></Footer>
      </a-layout-footer>
    </a-layout>
    <SettingDrawer v-has-right:[params].foo.bar="rightKey"></SettingDrawer>
  </a-layout>
</template>

<script>
import Header from "./Header";
import Footer from "./Footer";
import SiderMenu from "./SiderMenu";
import SettingDrawer from "@/components/SettingDrawer";

export default {
  name: "BasicLayout",
  data() {
    return {
      collapsed: false,
      params: "wm",
      rightKey: ["admin"]
    };
  },
  computed: {
    navTheme() {
      return this.$route.query.navTheme || "dark";
    },
    navLayout() {
      return this.$route.query.navLayout || "left";
    }
  },
  components: {
    Header,
    Footer,
    SiderMenu,
    SettingDrawer
  }
};
</script>

<style lang="less">
#components-layout-demo-side {
  .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px;
    line-height: 32px;
    text-align: center;
    color: #ddd;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .trigger {
    padding: 0 20px;
    line-height: 64px;
    font-size: 20px;
    cursor: pointer;

    &:hover {
      color: #1890ff;
    }
  }
  &.nav-theme-light {
    .logo {
      color: #333;
    }
  }
  &.nav-theme-dark {
  }
  &.nav-layout-left {
  }
  &.nav-layout-top {
  }
}
</style>
